<template>
  <div id="sing">
      
          <ul>
              <template v-for="(item,index) in hotArr">
              <li :key="index">
                  <div>{{index + 1}}</div>
                 <div>
                     <div>
                        <div>{{item.name}}</div>
                        <div>{{item.ar[0].name}} - {{item.name}}</div>
                    </div>
                    <div class="iconfont icon-bofang"></div>
                </div>
              </li>
              </template>
          </ul>
      
  </div>
</template>

<script>

export default {
    props:["hotArr"],
}
</script>

<style lang="scss" scoped>
   #sing{
       width: 100%;
       ul{
           li{
               display: flex;
               justify-content: space-around;
               align-items: center;
              >div:nth-of-type(1){
                  font-size: _vw(40);

                //   color: pink;
              }
              >div:nth-of-type(2){
                  width: _vw(650);
                  height: _vw(110);
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  border-bottom: 0.1px solid #888;

                    //  padding-left: _vw(30);
                >div:first-child{
                    >div:first-child{
                      font-size: _vw(30);
                     
                    //   font-weight:bolder;
                  }
                  >div:last-child{
                      font-size: _vw(18);
                      color: #888;
                  }
                }
                >.iconfont{
                    font-size: _vw(44);
                    color: #888;
                }
              }
           }
       }
   }
</style>